<template>
	<view :style="colorStyle">
		<view class="bulletinModule" :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
        borderRadius: `${info.radius * 2}rpx`,
        background: `${info.bgColor}`,
      }">
			<view class="info1 flex aitems between">
				<view class="left flex aitems">
					<view v-if="info.iconShow" class="icon flex aitems jcenter" :style="{
              background: `${info.iconBgColor}`,
              borderRadius: `${info.iconRadius * 2}rpx`,
            }">
						<image :src="info.icon" class="icon" mode="widthFix" alt="" />
					</view>
					<swiper class="swiper" :height="`${info.height * 2}rpx`" :indicator-dots="false" :autoplay="true"
						:vertical="true" :interval="`${info.speed * 1000}`" :duration="500" :circular="true">
						<swiper-item v-for="(i, index,key) in list" :key="key">
							<view class="titles" @click.stop="gourl(`/pages/bulletin/detail?id=${i.id}`)">{{ i.title }}
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="right flex aitems" :style="{ color: `${info.moreColor}` }" v-if="info.moreShow == 1"
					@click.stop="gourl(`/pages/bulletin/bulletin`)">
					<span>{{ info.more }}</span>
					<u-icon name="arrow-right" :color="`${info.moreColor}`" size="12"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bulletinList
	} from "@/servers/servers.js";
	import {
		HTTP_STATUS
	} from "@/servers/config.js";
	import colors from "@/mixins/color";
	import {
		go
	} from "@/utils/wxAPI";
	export default {
		mixins: [colors],
		props: {
			info: {
				default: {},
			},
		},
		data() {
			return {
				current: 0,
				list: [],
			};
		},
		mounted() {
			this.handleBulletinList();
		},
		activated() {
			this.handleBulletinList();
		},
		methods: {
			async handleBulletinList() {
				let {
					data
				} = await bulletinList();
				if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
					let list = data.data;
					this.list = list;
				}
			},
			gourl(url) {
				go(url);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bulletinModule {
		position: relative;
		cursor: move;
		position: relative;
		overflow: hidden;

		.info1 {
			position: relative;
			z-index: 1;

			.left {
				width: calc(100% - 160rpx);

				.icon {
					width: 72rpx;
					height: 72rpx;

					// background: #fff;
					image {
						width: 32rpx;
						height: 32rpx;
						object-fit: cover;
					}
				}

				.swiper {
					width: 100%;
					height: 72rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.titles {
						// height: 100%;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						line-height: 76rpx;
						margin-left: 20rpx;
					}
				}
			}

			.right {
				font-size: 24rpx;

				span {}
			}
		}
	}
</style>